<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
    <!-- line标签绘制一条线，其属性x1, y1指的是起始点， x2, y2指的是终点。 -->
    <!-- style属性使用stroke和stroke-width样式设置线条的颜色和粗细。 -->

    <!-- x1 - 这是第一个点的x坐标。
    y1 - 这是第一个点的y坐标。
    x2 - 这是第二个点的x坐标。
    y2 - 这是第二个点的y坐标。
    stroke - 线条的颜色。
    stroke-width - 线的粗细。 -->
    <svg width="300" height="300">
        <line x1="100" y1="100" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
    </svg>

    <!-- //矩形由rect标记 -->
    <!-- x - 这是矩形左上角的x坐标。

    y - 这是矩形左上角的y坐标。

    width - 这表示矩形的宽度。

    height - 表示矩形的高度。 -->
    <svg width="300" height="300">
        <rect x="20" y="20" width="300" height="300" fill="red">
        </rect>
    </svg>


    <!-- 要使用D3.js创建SVG -->
    <!-- Step 1 - 创建一个容器来保存SVG图像，如下所示。 -->
    <div id="svgcontainer">
    </div>
    <!-- 创建一个矩形的容器 -->
    <div id="rectdiv"></div>
    <script>
        //     let width =300;
        //     let height=300;
        //     let svg=d3.select("#svgcontainer").append("svg").append("line").attr("x1", 100)
        //    .attr("y1", 100)
        //    .attr("x2", 200) 
        //    .attr("y2", 200)
        //    .style("stroke", "rgb(255,0,0)")
        //    .style("stroke-width", 2).attr("width",width).attr("height",height)


        let width = 300
        let height = 300
        let svg = d3.select("#rectdiv").append("svg").attr("width", width).attr("height", height).append("rect").attr("x", 20).attr("y", 20).attr("width", 200).attr("height", 100).attr("fill", "green")








    </script>


</body>

</html>